<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld :msg="totalTxt" />
    {{message}}{{ruleForm.name}}
    <el-button @click="changeMsg">修改message</el-button>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForms"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
    </el-form>-->
    <div class="tree_box" id="tree1">
      <el-scrollbar height="200px">
        <scroll-tree :defaultProps="defaultProps" :treeData="treeData"></scroll-tree>
      </el-scrollbar>
    </div>
    
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import scrollTree from "@/components/scrollTree.vue";
import { getCurrentInstance, ref } from "vue";

import { FormTest } from "@/types/formTest";

//组件引入
@Options({
  components: {
    HelloWorld,
    scrollTree
  }
})
export default class Home extends Vue {
  // ajax = getCurrentInstance().proxy.$axios
  //属性
  message = "message属性";
  timer = null;
  msg = "Welcome to Your Vue.js + TypeScript App";
  ruleForm: FormTest = {
    name: "12121"
  };
  rules: Object = {
    name: [
      { required: true, message: "请输入活动名称", trigger: false },
      { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: false }
    ]
  };
  // 计算属性
  private get totalTxt(): String {
    return `${this.message}${this.msg}`;
  }
  //方法
  public changeMsg(): void {
    // console.log(this.ajax)
    this.message = "message修改";
    console.log(this.ruleForm);
    // this.ajax.get("http://www.baidu.com")
  }
  orginData = [
    {
      label: "一级 1",
      children: [
        {
          label: "二级 1-1",
          children: [
            {
              label: "三级 1-1-1"
            }
          ]
        }
      ]
    },
    {
      label: "一级 2",
      children: [
        {
          label: "二级 2-1",
          children: [
            {
              label: "三级 2-1-1"
            }
          ]
        },
        {
          label: "二级 2-2",
          children: [
            {
              label: "三级 2-2-1"
            }
          ]
        }
      ]
    },
    {
      label: "一级 3",
      children: [
        {
          label: "二级 3-1",
          children: [
            {
              label: "三级 3-1-1"
            }
          ]
        },
        {
          label: "二级 3-2",
          children: [
            {
              label: "三级 3-2-1"
            }
          ]
        }
      ]
    }
  ];
  treeData = [...this.orginData, ...this.orginData, ...this.orginData];
  defaultProps = {
    children: "children",
    label: "label"
  };
  
  created(){
  //  this.timer = setInterval(()=>{
  //    console.log(1111)
  //  },1000)
  }
}
</script>

<style lang="less">
.tree_box {
  width: 300px;
  height:400px;
  overflow: auto;
  border: solid 1px #ddd;
  box-sizing: border-box;
  padding: 10px;
}
.menu_box{
  width:200px;
  height:100%;
}
</style>
